<template>
    <el-card>
        <el-row :gutter="5">
            <el-col :md="{span:8}" :sm="{span: 12}">
                <el-input
                        v-model="searchContext.searchContent"
                        placeholder="请输入用户名或者id"
                        class="search-doctor-input"
                >
                    <template #append>
                        <el-button style="width: 100px" @click="LoadDrugsDatas(1)">
                            <el-icon>
                                <i class="fas fa-search" />
                            </el-icon>
                            搜索
                        </el-button>
                    </template>
                </el-input>
            </el-col>
            <el-col :md="{span:4}" :sm="{span:4}">
                <el-button type="primary" plain @click="isShowAddUser">
                    <el-icon>
                        <i class="fas fa-plus" />
                    </el-icon>
                    添加
                </el-button>
            </el-col>
        </el-row>
    </el-card>
    <el-card style="margin-top: 5px">
        <el-table :data="drugsDatas" style="width: 100%" v-loading="loading" @cell-dblclick="cellClick">
            <el-table-column prop="userId" label="职工ID" />
            <el-table-column prop="userAccount" label="职工账号"  />
            <el-table-column prop="userName" label="职工姓名"  />
            <el-table-column label="岗位名称">
                <template #default="scope">
                    <el-select v-model="update.roleId" :model-value="scope.row.roleId" placeholder="请选择岗位" style="width: 100px" clearable @change="updateRole(scope.row)">
                        <el-option label="请选择" :value="0" disabled></el-option>
                        <template v-for="(value,index) of roleDatas" :key="index">
                            <el-option  :label="value.roleName" :value="value.roleId" v-if="value.roleId!==1"></el-option>
                        </template>

                    </el-select>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button type="danger"   @click="deleteUser(scope.row)">
                        <el-icon>
                            <i class="fas fa-trash-alt" />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-card style="margin-top: 10px">
        <el-pagination style="text-align: center" layout="prev, pager, next" :page-size="pageInation.pageSize" :page-count="pageInation.pageCount" @current-change="LoadDrugsDatas" small></el-pagination>
    </el-card>
    <el-dialog
            v-model="dialog.isShowAddUser"
            title="添加药品"
            width="30%"
            destroy-on-close
            center
    >
        <SystemPopupAddUser />
    </el-dialog>
</template>

<script>
    import utils from "@/Utils";
    import SystemPopupAddUser from "@/components/SystemAdmin/Popup/SystemPopupAddUser";
    export default {
        name: "SystemAdminDurgs",
        components:{
            SystemPopupAddUser
        },
        data(){
            return{
                searchContext:{
                    searchContent:""
                },
                drugsDatas:[],
                roleDatas:[],
                pageInation:{
                    pageCount:0,
                    pageSize:0,
                },
                loading:true,
                dialog:{
                    isShowAddUser:false
                },
                update:{
                    deptId:'',
                    roleId:''
                },
                utils,
            }
        },
        methods:{
            LoadDrugsDatas:async function (pageIndex) {
                this.loading=true;
                const searchContext=this.searchContext;
                await this.axios.post("/User/isLogin/isSystemAdmin/getUsersBySelective",{
                    pageIndex:pageIndex,
                    pageSize:10,
                    roleId:"2",
                    search:searchContext.searchContent,
                    deptId:"0"
                }).then((req)=>{
                    const data=req.data;
                    if(data.code>0){
                        this.utils.tipsMessage(data.error,data.code);
                        return
                    }
                    const pageData=data.data.pageData;
                    this.pageInation.pageSize=data.data.pageSize;
                    this.pageInation.pageCount=data.data.pageCount;
                    this.drugsDatas=pageData;
                    this.loading=false
                })
            },
            LoadRoleDatas:async function(){
                await this.axios.get("/Role//isLogin/getRoles").then((req)=>{
                    const data=req.data;
                    if(data.code>0){
                        this.utils.tipsMessage(data.error,data.code);
                        return;
                    }
                    this.roleDatas=data.data;
                })
            },
            cellClick:function (row, column) {
                if(column.property!=='userName') return;
                this.$prompt("请确认是否需要修改:"+column.label,"修改内容",{
                    showCancelButton:false,
                    inputValue:row[column.property]
                }).then((val)=>{
                    if (this.utils.isRange(30, 1, val.value)) {
                        this.utils.tipsMessage("真实姓名需要输入2~30位");
                        return;
                    }
                    this.axios.post("/User/isLogin/isSystemAdmin/updateUserDeptOrRoleOrName",{
                        userId:row.userId,
                        userAccount:row.userAccount,
                        newUserName:val.value
                    }).then((req)=>{
                        const data=req.data;
                        if(data.code>0){
                            this.utils.tipsMessage(data.error,data.code);
                            return;
                        }
                        this.utils.tipsMessage(data.data,data.code);
                        row.userName=val.value;
                    })
                })
            },
            updateRole:function (val){
                const roleItem=this.roleDatas.filter((item)=>{
                    return item.roleId===this.update.roleId;
                })
                this.$confirm("是否需要修改科室为:"+roleItem[0].roleName, "修改科室", {
                    showCancelButton:false
                }).then(()=>{
                    this.axios.post("/User/isLogin/isSystemAdmin/updateUserDeptOrRoleOrName",{
                        userId:val.userId,
                        userAccount:val.userAccount,
                        newRoleId:this.update.roleId,
                        oldRoleId:val.roleId,
                        newDeptId:"0"
                    }).then((req)=>{
                        const data=req.data;
                        if(data.code>0){
                            this.utils.tipsMessage(data.error,data.code);
                            return;
                        }
                        this.utils.tipsMessage(data.data,data.code);
                        this.LoadDrugsDatas(1);
                    })
                })

            },
            deleteUser:function (val) {
                this.$confirm("请确认是否需要删除账号:"+val.userAccount, "删除用户", {
                    type:'type',
                    showCancelButton:false
                }).then(()=>{
                    this.axios.post("/User/isLogin/isSystemAdmin/deleteUserByUserIdAndAccount",{
                        userId:val.userId,
                        userAccount:val.userAccount
                    }).then((req)=>{
                        const data=req.data;
                        if(data.code>0){
                            this.utils.tipsMessage(data.error,data.code);
                            return;
                        }
                        this.utils.tipsMessage(data.data,data.code);
                        this.LoadDrugsDatas(1);
                    })
                })
            },
            isShowAddUser:function () {
                this.dialog.isShowAddUser=true
            }

        },
        mounted(){
            this.LoadDrugsDatas(1)
            this.LoadRoleDatas();
        }
    }
</script>

<style scoped>
    .search-doctor-input /deep/ .el-input-group__prepend,.search-doctor-input /deep/ .el-input-group__append {
        background-color: #fff;
    }
</style>